<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <div :style="{fontSize: fontSize + 'px'}">{{pmsg}}</div>
            <menu-item :parr="parr" @enlarge-text="handle"></menu-item>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            Vue.component('menu-item', {
                props: ['parr'],
                template: `
                    <div>
                        <ul>
                            <li :key="index" v-for="(item,index) in parr">{{item}}</li>    
                        </ul>
                        <button v-on:click='$emit("enlarge-text",2)'>扩大字体2</button>  
                        <button v-on:click='$emit("enlarge-text",6)'>扩大字体6</button>  
                    </div> 
                `
            });
            var app = new Vue({
                el: '#app',
                data: {
                    pmsg: '父组件中内容',
                    parr: ['apple', 'orange', 'banana'],
                    fontSize: 10
                },
                methods: {
                    handle: function(val) {
                        // 扩大字体大小
                        this.fontSize += val;
                    }
                }
            });
        </script>
    </body>
</html>
